<template>
  <div class="white-box"  v-loading.fullscreen="loading">
    <base-steps :active="stepActive" :arrs="[{text:'基本信息',steps:0},{text:'扩展信息',steps:1},{text:'商品详情',steps:2}]"></base-steps>
    <info :detail="product" :type="type" v-show="stepActive === 0" ref="infoRef"></info>
    <other :detail="product" v-show="stepActive === 1" ref="otherRef"></other>
    <detail :detail="product" v-show="stepActive === 2" ref="detailRef"></detail>
    <div class="foot-btn flexs-center" style="margin-top: 30px">
      <el-button type="default" size="large" @click="prevStep" v-if="stepActive != 0"> 上一步 </el-button>
      <el-button type="primary" size="large" @click="nextStep" v-if="stepActive != 2"> 下一步 </el-button>
      <el-button type="primary" size="large" @click="submit" :loading="btnLoading"> 保存 </el-button>
    </div>
  </div>
  <go-back />
</template>

<script setup>
import {getCurrentInstance, ref, onMounted, shallowRef, reactive, onBeforeUnmount, computed} from "vue"
import {useRouter, useRoute} from "vue-router"
import GoBack from "@components/GoBack.vue"
import "@wangeditor/editor/dist/css/style.css"
import BaseSteps from "@components/BaseSteps.vue";
import info from "./components/info.vue";
import detail from "./components/detail.vue";
import other from "./components/other.vue";

const router = useRouter()
const route = useRoute()
const {proxy} = getCurrentInstance()
const type = 0;
const sid = route.query.sid || ""

const stepActive = ref(0)
const nextStep = async () => {
  if (stepActive.value == 0) {
    let infoData = await infoRef.value.submit();
    if (!infoData) {
      return;
    }
  }
  if (stepActive.value == 1) {
    let otherData = await otherRef.value.submit();
    if (!otherData) {
      return;
    }
  }
  stepActive.value += 1;
}
const prevStep = () => {
  stepActive.value -= 1;
}
const infoRef = ref(null);
const otherRef = ref(null);
const detailRef = ref(null);
const btnLoading = ref(false)
const submit = async () => {
  let infoData = await infoRef.value.submit();
  let otherData = await otherRef.value.submit();
  let detailData = await detailRef.value.submit();
  if (!infoData) {
    proxy.$message({message: '基本信息未完善', type: "error"})
    return
  }
  if (!otherData) {
    proxy.$message({message: '扩展信息未完善', type: "error"})
    return
  }
  if (!detailData) {
    proxy.$message({message: '商品详情未完善', type: "error"})
    return
  }
  let formData = {
    ...infoData,
    ...otherData,
    ...detailData
  }
  formData.type = type;
  proxy.$util.filterObj(formData);
  btnLoading.value = true
  let method = 'post';
  let url = '/product'
  if (sid) {
    method = 'put';
    url += `/${sid}`
  }
  proxy.$axios[method](url, formData)
      .then((res) => {
        btnLoading.value = false
        if (res.data.code == 200) {
          proxy.$message({message: "保存成功！", type: "success", onClose: () => router.go(-1)})
        } else {
          proxy.$message({message: res.data.msg, type: "error"})
        }
      })
      .catch((err) => {
        btnLoading.value = false
      })

}
onMounted(() => {
  if (sid) {
    getDetail()
  }
})
const product = reactive({})
const loading = ref(false)
const getDetail = async () => {
  loading.value = true
  await proxy.$axios
      .get(`/product/${sid}`)
      .then((res) => {
        if (res.data.code == 200) {
          let result = res.data.data
          for (let key in result) {
            // if(key == 'bannerImage' || key == 'detailImage' || key == 'mainImage') {}
            product[key] = result[key]
          }
          try {
            product.classificationSid = result.classification.sid
          } catch (e) {

          }


        } else {
          proxy.$message({message: res.data.msg, type: "error"})
        }
      }).catch((err) => {

      }).finally(() => {
        loading.value = false
      })
}
</script>

<style lang="less" scoped>

</style>
